import { CSSProperties } from 'react'
import { Icon } from 'tdesign-icons-react';
import styles from './index.module.less'

const StatItem = (props: any) => {

  const {
    hasIcon = false, // 是否有图标
    frontValue = '', // 前面的值 （有图标时为图标name，没有图标时为数字）
    backValue = '', // 后面的值
    gap = '6px', // 间隔
    color = '#fff',
    fontSize = '14px',
    onClick = () => { },
    className = '',
  } = props


  return <div className={`${className} ${styles.statItem}`} style={{'--gap': gap, '--color': color, '--fontSize': fontSize } as CSSProperties} onClick={() => onClick(frontValue)}>
    {hasIcon ? (<Icon name={frontValue}/>) : (<div>{frontValue}</div>)}
    <div>{backValue}</div>
  </div>
}

export default StatItem
